html, body {
  margin: 0;
  padding: 0;
  font-family: 'Microsoft Yahei';
}

#loading-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: red;
  color: yellow;
  text-align: center;
}

.loading-img {
  width: 80px;
  height: 80px;
  margin: auto;
  background-color: yellow;
 
  border-radius: 100%; 
  -webkit-animation: scaleout 1.0s infinite ease-in-out;
  animation: scaleout 1.0s infinite ease-in-out;
}
 
@-webkit-keyframes scaleout {
  0% { -webkit-transform: scale(0.0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
 
@keyframes scaleout {
  0% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

#load-hello img {
  width:60%;
  margin-left:-40%;
}

#loading-progress-value {
  margin-top: -53px;
  margin-bottom: 20px;
  font-size: 20px;
}

.loading-slogan span {
  font-size: 140%;
  margin-left: 5px;
  margin-right: 5px;
  font-weight: bold; 
}

/* common */
html, body {
  position: relative;
  height: 100%;
}
body {
  background: #efefef;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #f7e3c8;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

/* load-wrapper */
#load-wrapper {
  background: #f7e3c8;
  position: relative;
}

#load-hello {
  position: absolute;
  top: 8%;
  left: 10%;
}

#load-bottle {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#load-bottle img {
  position: absolute;
  left: 24%;
  bottom: 8.5%;
  width: 62%;
}

#load-bag {
  position: absolute;
  left: 0;
  bottom: 3%;
  width: 100%;
  z-index: 4;
}

#load-bag img {
  width: 100%;
}

#load-progress {
  position: absolute;
  bottom: 11%;
  left: 0;
  width: 100%;
  text-align: center;
  color: #f7e3c8;
  font-size: 22px;
  z-index: 4;
}

#load-arm-rice {
  position: absolute;
  right: 14%;
  top: 30%;
  z-index: 0;
}

@-webkit-keyframes anim-arm-rice {
  0% {
  } 25% {
    -webkit-transform: rotate(-100deg);
       -moz-transform: rotate(-100deg);
        -ms-transform: rotate(-100deg);
         -o-transform: rotate(-100deg);
            transform: rotate(-100deg);
    opacity: 1;
  } 30% {
    opacity: 0;
  } 100% {
    opacity: 0;
  }
}

@-moz-keyframes anim-arm-rice {
  0% {
  } 25% {
    -webkit-transform: rotate(-100deg);
       -moz-transform: rotate(-100deg);
        -ms-transform: rotate(-100deg);
         -o-transform: rotate(-100deg);
            transform: rotate(-100deg);
    opacity: 1;
  } 30% {
    opacity: 0;
  } 100% {
    opacity: 0;
  }
}

@-ms-keyframes anim-arm-rice {
  0% {
  } 25% {
    -webkit-transform: rotate(-100deg);
       -moz-transform: rotate(-100deg);
        -ms-transform: rotate(-100deg);
         -o-transform: rotate(-100deg);
            transform: rotate(-100deg);
    opacity: 1;
  } 30% {
    opacity: 0;
  } 100% {
    opacity: 0;
  }
}

@-o-keyframes anim-arm-rice {
  0% {
  } 25% {
    -webkit-transform: rotate(-100deg);
       -moz-transform: rotate(-100deg);
        -ms-transform: rotate(-100deg);
         -o-transform: rotate(-100deg);
            transform: rotate(-100deg);
    opacity: 1;
  } 30% {
    opacity: 0;
  } 100% {
    opacity: 0;
  }
}

@keyframes anim-arm-rice {
  0% {
  } 25% {
    -webkit-transform: rotate(-100deg);
       -moz-transform: rotate(-100deg);
        -ms-transform: rotate(-100deg);
         -o-transform: rotate(-100deg);
            transform: rotate(-100deg);
    opacity: 1;
  } 30% {
    opacity: 0;
  } 100% {
    opacity: 0;
  }
}

#load-arm-rice img {
  -webkit-transform-origin: 0% 50%;
     -moz-transform-origin: 0% 50%;
      -ms-transform-origin: 0% 50%;
       -o-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
  -webkit-animation: anim-arm-rice 1.0s infinite linear;
     -moz-animation: anim-arm-rice 1.0s infinite linear;
      -ms-animation: anim-arm-rice 1.0s infinite linear;
       -o-animation: anim-arm-rice 1.0s infinite linear;
          animation: anim-arm-rice 1.0s infinite linear;
}

#load-arm {
  position: absolute;
  right: 40%;
  top: 30%;
}

@-webkit-keyframes anim-arm {
  0% {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
  } 25% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
  } 100% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

@-moz-keyframes anim-arm {
  0% {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
  } 25% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
  } 100% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

@-ms-keyframes anim-arm {
  0% {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
  } 25% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
  } 100% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

@-o-keyframes anim-arm {
  0% {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
  } 25% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
  } 100% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

@keyframes anim-arm {
  0% {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
  } 25% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
         -o-transform: rotate(-30deg);
            transform: rotate(-30deg);
  } 100% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

#load-arm img {
  -webkit-transform-origin: 100% 55%;
     -moz-transform-origin: 100% 55%;
      -ms-transform-origin: 100% 55%;
       -o-transform-origin: 100% 55%;
          transform-origin: 100% 55%;
  -webkit-animation: anim-arm 1.0s infinite linear;
     -moz-animation: anim-arm 1.0s infinite linear;
      -ms-animation: anim-arm 1.0s infinite linear;
       -o-animation: anim-arm 1.0s infinite linear;
          animation: anim-arm 1.0s infinite linear;
}

#load-rice {
  position: absolute;
  right: 30%;
  top: 22%;
  z-index: 0;
}

@-webkit-keyframes anim-rice {
  0% {
    -webkit-transform: rotate(40deg);
       -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
         -o-transform: rotate(40deg);
            transform: rotate(40deg);
    opacity: 0;
  } 25% {
    -webkit-transform: rotate(-20deg);
       -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
         -o-transform: rotate(-20deg);
            transform: rotate(-20deg);
    opacity: 1;
  } 50% {
    -webkit-transform: translate(-30px, 140px) rotate(-160deg);
       -moz-transform: translate(-30px, 140px) rotate(-160deg);
        -ms-transform: translate(-30px, 140px) rotate(-160deg);
         -o-transform: translate(-30px, 140px) rotate(-160deg);
            transform: translate(-30px, 140px) rotate(-160deg);
  } 100% {
    -webkit-transform: translate(-30px, 240px) rotate(-160deg);
       -moz-transform: translate(-30px, 240px) rotate(-160deg);
        -ms-transform: translate(-30px, 240px) rotate(-160deg);
         -o-transform: translate(-30px, 240px) rotate(-160deg);
            transform: translate(-30px, 240px) rotate(-160deg);
  }
}

@-moz-keyframes anim-rice {
  0% {
    -webkit-transform: rotate(40deg);
       -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
         -o-transform: rotate(40deg);
            transform: rotate(40deg);
    opacity: 0;
  } 25% {
    -webkit-transform: rotate(-20deg);
       -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
         -o-transform: rotate(-20deg);
            transform: rotate(-20deg);
    opacity: 1;
  } 50% {
    -webkit-transform: translate(-30px, 140px) rotate(-160deg);
       -moz-transform: translate(-30px, 140px) rotate(-160deg);
        -ms-transform: translate(-30px, 140px) rotate(-160deg);
         -o-transform: translate(-30px, 140px) rotate(-160deg);
            transform: translate(-30px, 140px) rotate(-160deg);
  } 100% {
    -webkit-transform: translate(-30px, 240px) rotate(-160deg);
       -moz-transform: translate(-30px, 240px) rotate(-160deg);
        -ms-transform: translate(-30px, 240px) rotate(-160deg);
         -o-transform: translate(-30px, 240px) rotate(-160deg);
            transform: translate(-30px, 240px) rotate(-160deg);
  }
}

@-ms-keyframes anim-rice {
  0% {
    -webkit-transform: rotate(40deg);
       -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
         -o-transform: rotate(40deg);
            transform: rotate(40deg);
    opacity: 0;
  } 25% {
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20deg);
            transform: rotate(20deg);
    opacity: 1;
  } 50% {
    -webkit-transform: translate(-30px, 140px) rotate(-160deg);
       -moz-transform: translate(-30px, 140px) rotate(-160deg);
        -ms-transform: translate(-30px, 140px) rotate(-160deg);
         -o-transform: translate(-30px, 140px) rotate(-160deg);
            transform: translate(-30px, 140px) rotate(-160deg);
  } 100% {
    -webkit-transform: translate(-30px, 240px) rotate(-160deg);
       -moz-transform: translate(-30px, 240px) rotate(-160deg);
        -ms-transform: translate(-30px, 240px) rotate(-160deg);
         -o-transform: translate(-30px, 240px) rotate(-160deg);
            transform: translate(-30px, 240px) rotate(-160deg);
  }
}

@-o-keyframes anim-rice {
  0% {
    -webkit-transform: rotate(40deg);
       -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
         -o-transform: rotate(40deg);
            transform: rotate(40deg);
    opacity: 0;
  } 25% {
    -webkit-transform: rotate(-20deg);
       -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
         -o-transform: rotate(-20deg);
            transform: rotate(-20deg);
    opacity: 1;
  } 50% {
    -webkit-transform: translate(-30px, 140px) rotate(-160deg);
       -moz-transform: translate(-30px, 140px) rotate(-160deg);
        -ms-transform: translate(-30px, 140px) rotate(-160deg);
         -o-transform: translate(-30px, 140px) rotate(-160deg);
            transform: translate(-30px, 140px) rotate(-160deg);
  } 100% {
    -webkit-transform: translate(-30px, 280px) rotate(-160deg);
       -moz-transform: translate(-30px, 280px) rotate(-160deg);
        -ms-transform: translate(-30px, 280px) rotate(-160deg);
         -o-transform: translate(-30px, 280px) rotate(-160deg);
            transform: translate(-30px, 280px) rotate(-160deg);
  }
}

@keyframes anim-rice {
  0% {
    -webkit-transform: rotate(40deg);
       -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
         -o-transform: rotate(40deg);
            transform: rotate(40deg);
    opacity: 0;
  } 25% {
    -webkit-transform: rotate(-20deg);
       -moz-transform: rotate(-20deg);
        -ms-transform: rotate(-20deg);
         -o-transform: rotate(-20deg);
            transform: rotate(-20deg);
    opacity: 1;
  } 50% {
    -webkit-transform: translate(-30px, 140px) rotate(-160deg);
       -moz-transform: translate(-30px, 140px) rotate(-160deg);
        -ms-transform: translate(-30px, 140px) rotate(-160deg);
         -o-transform: translate(-30px, 140px) rotate(-160deg);
            transform: translate(-30px, 140px) rotate(-160deg);
  } 100% {
    -webkit-transform: translate(-30px, 240px) rotate(-160deg);
       -moz-transform: translate(-30px, 240px) rotate(-160deg);
        -ms-transform: translate(-30px, 240px) rotate(-160deg);
         -o-transform: translate(-30px, 240px) rotate(-160deg);
            transform: translate(-30px, 240px) rotate(-160deg);
  }
}

#result-2, #result-3 {
  background-color: #d41619;
}

#result-2 img,
#result-3 img,
#result-4 img {
  width: auto;
  height: auto;
}

#index-intro-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

#result-2 #index-intro-head img {
  width: 100%;
}

#index-intro-head-people {
  position: absolute;
  left: 14%;
  top: 33%;
  z-index: 1;
}

#index-intro-head-msg-one {
  position: absolute;
  left: 30%;
  top: 28%;
  z-index: 1;
}

#index-intro-head-msg-two {
  position: absolute;
  left: 20%;
  top: 43%;
  z-index: 1;
}

#index-intro-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

#result-2 #index-intro-foot img {
  width: 100%;
}

#index-intro-foot-btn {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
}

#index-lucky-intro-head {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
}

#result-3 #index-lucky-intro-head img {
  width: 100%;
}

#index-lucky-intro-people {
  position: absolute;
  bottom: 28%;
  left: 0;
  right: 0;
  text-align: center;
}

#index-lucky-intro-left {
  position: absolute;
  bottom: 30%;
  left: 18%;
}

#index-lucky-intro-right {
  position: absolute;
  bottom: 30%;
  right: 22%;
}

#index-lucky-intro-coordinate {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 27%;
  z-index: 1;
}

#index-lucky-intro-foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

#result-3 #index-lucky-intro-foot img {
  width: 100%;
}

#result-3 #pg2-1 img {
    width: 80%;
}
#result-3 #pg2-2 img {
    width: 100%;
}
#result-3 #pg2-3 img {
    width: 80%;
}
#result-3 #pg2-r1 img {
    width: 100%;
}
#result-3 #pg2-r2 img {
    width: 100%;
}
#result-3 #pg2-r3 img {
    width: 100%;
}
#result-3 #pg2-r4 img {
    width: 100%;
}
#result-3 #pg2-r5 img {
    width: 100%;
}
#result-3 #pg2-r6 img {
    width: 100%;
}
#result-3 #pg2-r7 img {
    width: 100%;
}
#result-3 #pg2-r8 img {
    width: 100%;
}
#result-3 #pg2-r9 img {
    width: 100%;
}
#result-3 #pg2-xj img {
    width: 100%;
}
#result-3 #pg2-xjhg img {
    width: 100%;
}
#result-3 #pg2-zb img {
    width: 100%;
}
#pg2-1 {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 73.5%;
 }
#pg2-2 {
    position: absolute;
    left: -8%;
    right: 0;
    bottom: 84.5%;
}
#pg2-3 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 62.5%;
}
#pg2-r1 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-r2 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-r3 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-r4 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-r5 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-r6 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-r7 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-r8 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-r9 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-zb {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24.5%;
    text-align: center;
}
#pg2-xj {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#pg2-xjhg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 27.5%;
    text-align: center;
}
#index-lucky-intro-angle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    text-align: center;
    z-index: 2;
}
#result-4 #pg3-hb img {
    width: 100%;
}
#result-4 #pg3-bm img {
    width: 100%;
}
#result-4 #pg3-xm img {
    width: 100%;
}
#result-4 #pg3-en img {
    width: 100%;
}
#pg3-hb{
    position: absolute;
    left: 0;
    right: 0;
    top: 1%;
}
#pg3-bm{
    position: absolute;
    left: 0;
    right: 0;
    top: 1%;
}
#pg3-xm{
    position: absolute;
    left: 0;
    right: 0;
    top:1%;
}
#pg3-en{
    position: absolute;
    left: 0;
    right: 0;
    top: 1%;
}
.pg3-en{
    -webkit-animation: pg3-en 1.5s linear infinite ;
    -moz-animation: pg3-en 1.5s linear infinite;
    -ms-animation: pg3-en 1.5s linear infinite ;
    -o-animation: pg3-en 1.5s linear infinite;
    animation: pg3-en 1.5s linear infinite ;
}
#index-blackboard-people {
  position: absolute;
  left: 14%;
  top: 13%;
}

#load-rice img {
  width: 100%;
  -webkit-animation: anim-rice 1.0s infinite linear;
     -moz-animation: anim-rice 1.0s infinite linear;
      -ms-animation: anim-rice 1.0s infinite linear;
       -o-animation: anim-rice 1.0s infinite linear;
          animation: anim-rice 1.0s infinite linear;
}

#load-wine {
  position: absolute;
  z-index: 0;
  top: 83%;
  right: 34%;
  left: 33%;
  bottom: 15%;
  background: #de3e25;
}

#load-wine-surface-wrapper {
  position: absolute;
  width: 100%;
  top: 81%;
  z-index: 0;
}

#load-wine-surface {
  margin-left: -1%;
}

.result {
  position: relative;
}

.result img {
  width: 100%;
  height: 100%;
}

/* register page */
#register-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  background-color: #e95741;
  padding: 20px 25px;
  z-index: 1;
  line-height:150%;
}

#register-wrapper:before {
  position: absolute;
  top: -30px;
  right: 20px;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 40px solid #e95741;
  border-bottom-width: 20px;
  border-top-width: 20px;
  border-right-color: transparent;
  border-top-color: transparent;
}

#register-form-wrapper {
  padding: 10px;
  border: 3px solid #f1dcb9;
  border-radius: 20px;
}

#register-form {
  margin: 0;
}

#register-form-info-wrapper {
  border: 6px solid #f3cc6f;
  border-radius: 10px;
  background-color: #f1ddba;
  padding: 10px;
}

#register-form-submit-wrapper {
  margin-top: 10px;
  padding: 4px;
  border: 2px solid #f8dbb6;
  border-radius: 14px;
  background-color: #cc181b;
}

#register-form-submit-wrapper .btn {
  display: block;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: #f6e4cb;
  color: #d41619;
  border: none;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

#register-form-submit-wrapper .btn:hover,
#register-form-submit-wrapper .btn:active,
#register-form-submit-wrapper .btn:focus {
  background-color: #f3cc6f;
}

.form-block {
  height: 35px;
  line-height: 35px;
}

.form-label {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  width: 20%;
  text-align: left;
  color: #d41619;
  font-weight: bold;
  font-size: 20px;
  float: left;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

#form-label-code {
  width: 60%;
}

#form-label-code .btn {
  display: inline-block;
  font-size: 12px;
  font-weight: normal;
  color: #d41619;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid #d41619;
  border-radius: 4px;
  background-color: #f9c88f;
  height: 25px;
  width: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
  line-height:60%;
}

#form-label-code .btn:hover,
#form-label-code .btn:active,
#form-label-code .btn:focus {
  background-color: #e1af74;
}

#form-label-code .btn.disable {
  color: #888;
  background-color: #cdcdcd;
  border-color: #ababab;
}

#form-label-code .btn.disable:hover,
#form-label-code .btn.disable:active,
#form-label-code .btn.disable:focus {
  background-color: #cdcdcd;
}

#form-label-tag {
  width: 40%;
}

#register-name,
#register-tel {
  width: 75%;
}

#register-code {
  width: 38%;
}

#register-tag {
  width: 55%;
  line-height: 120%;
  padding-top: 0px;
  padding-bottom: 0px;
}

.register-text {
  border: none;
  border-radius: 0;
  outline: none;
  background-color: #eab978;
  color: #d41619;
  height: 25px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 12px;
  float: right;
}

#result-4 {
  background: #f5e2c7;
}

/* lucky */
#result-5 {
  background-color: #d41619;  
}

#index-lucky-rule-wrapper {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: auto;
}

#index-lucky-rule-wrapper img {
  width: 100%;
  height: auto;
}

#lucky-machine-wrapper {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
}

#lucky-machine {
  position: relative;
  width: 307px;
  height: 210px;
  margin: auto;
  border: 6px solid #bc1c20;
  border-radius: 10px;
  box-shadow: 2px 2px 1px #000;
  background-color: #f6e4cb;
}

#lucky-machine .border-left {
  position: absolute;
  left: 5px;
  top: 5px;
  bottom: 5px;
  width: 15px;
  background: url(../img/index-light-v.png) repeat-y;
  -webkit-animation: anim-light-v 1s infinite linear;
     -moz-animation: anim-light-v 1s infinite linear;
      -ms-animation: anim-light-v 1s infinite linear;
       -o-animation: anim-light-v 1s infinite linear;
          animation: anim-light-v 1s infinite linear;
}

#lucky-machine .border-top {
  position: absolute;
  left: 25px;
  top: 5px;
  right: 25px;
  height: 15px;
  background: url(../img/index-light-h.png) repeat-x;
  -webkit-animation: anim-light-h 1s infinite linear;
     -moz-animation: anim-light-h 1s infinite linear;
      -ms-animation: anim-light-h 1s infinite linear;
       -o-animation: anim-light-h 1s infinite linear;
          animation: anim-light-h 1s infinite linear;
}

#lucky-machine .border-right {
  position: absolute;
  right: 5px;
  top: 5px;
  bottom: 5px;
  width: 15px;
  background: url(../img/index-light-v.png) repeat-y;
  -webkit-animation: anim-light-v 1s 0.5s infinite linear;
     -moz-animation: anim-light-v 1s 0.5s infinite linear;
      -ms-animation: anim-light-v 1s 0.5s infinite linear;
       -o-animation: anim-light-v 1s 0.5s infinite linear;
          animation: anim-light-v 1s 0.5s infinite linear;
}

#lucky-machine .border-bottom {
  position: absolute;
  right: 25px;
  bottom: 5px;
  left: 25px;
  height: 15px;
  background: url(../img/index-light-h.png) repeat-x;
  -webkit-animation: anim-light-h 1s 0.5s infinite linear;
     -moz-animation: anim-light-h 1s 0.5s infinite linear;
      -ms-animation: anim-light-h 1s 0.5s infinite linear;
       -o-animation: anim-light-h 1s 0.5s infinite linear;
          animation: anim-light-h 1s 0.5s infinite linear;
}

#lucky-machine .lucky-screen-wrapper {
  padding-top: 10px;
  margin: 5px;
  height: 96px;
  border: 2px solid #d51b1c;
  border-radius: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

#lucky-machine .lucky-screen-single {
  position: absolute;
  border: 6px solid #d51b1c;
  display: inline-block;
  width: 75px;
  height: 72px;
  box-sizing: border-box;
  overflow: hidden;
  background: url(../img/lucky-screen-bg.png) no-repeat;
  background-size: cover;
}

#lucky-screen-single-0 {
  left: 15px;
}

#lucky-screen-single-1 {
  left: 96px;
}

#lucky-screen-single-2 {
  left: 177px;
}

#lucky-machine .lucky-screen-single:first-child {
  border-radius: 6px 0 0 6px;
}

#lucky-machine .lucky-screen-single:last-child {
  margin-right: 0;
  border-radius: 0 6px 6px 0;
}

#lucky-machine .lucky-screen-inner {
  margin-top: -180px;
}

#lucky-machine .lucky-screen-inner img {
  height: 60px;
}

@-webkit-keyframes anim-light-v {
  0% {
    background-position: center 0;
  } 49.9% {
    background-position: center 0;
  } 50% {
    background-position: center 20px;
  } 99.9% {
    background-position: center 20px;
  } 100% {
    background-position: center 0;
  }
}

@-moz-keyframes anim-light-v {
  0% {
    background-position: center 0;
  } 49.9% {
    background-position: center 0;
  } 50% {
    background-position: center 20px;
  } 99.9% {
    background-position: center 20px;
  } 100% {
    background-position: center 0;
  }
}

@-ms-keyframes anim-light-v {
  0% {
    background-position: center 0;
  } 49.9% {
    background-position: center 0;
  } 50% {
    background-position: center 20px;
  } 99.9% {
    background-position: center 20px;
  } 100% {
    background-position: center 0;
  }
}

@-o-keyframes anim-light-v {
  0% {
    background-position: center 0;
  } 49.9% {
    background-position: center 0;
  } 50% {
    background-position: center 20px;
  } 99.9% {
    background-position: center 20px;
  } 100% {
    background-position: center 0;
  }
}

@keyframes anim-light-v {
  0% {
    background-position: center 0;
  } 49.9% {
    background-position: center 0;
  } 50% {
    background-position: center 20px;
  } 99.9% {
    background-position: center 20px;
  } 100% {
    background-position: center 0;
  }
}

@-webkit-keyframes anim-light-h {
  0% {
    background-position: 0 center;
  } 49.9% {
    background-position: 0 center;
  } 50% {
    background-position: 20px center;
  } 99.9% {
    background-position: 20px center;
  } 100% {
    background-position: 0 center;
  }
}

@-moz-keyframes anim-light-h {
  0% {
    background-position: 0 center;
  } 49.9% {
    background-position: 0 center;
  } 50% {
    background-position: 20px center;
  } 99.9% {
    background-position: 20px center;
  } 100% {
    background-position: 0 center;
  }
}

@-ms-keyframes anim-light-h {
  0% {
    background-position: 0 center;
  } 49.9% {
    background-position: 0 center;
  } 50% {
    background-position: 20px center;
  } 99.9% {
    background-position: 20px center;
  } 100% {
    background-position: 0 center;
  }
}

@-o-keyframes anim-light-h {
  0% {
    background-position: 0 center;
  } 49.9% {
    background-position: 0 center;
  } 50% {
    background-position: 20px center;
  } 99.9% {
    background-position: 20px center;
  } 100% {
    background-position: 0 center;
  }
}

@keyframes anim-light-h {
  0% {
    background-position: 0 center;
  } 49.9% {
    background-position: 0 center;
  } 50% {
    background-position: 20px center;
  } 99.9% {
    background-position: 20px center;
  } 100% {
    background-position: 0 center;
  }
}

.lucky-wheel {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
}

.lucky-result-wrapper {
  position: relative;
  margin-top: 10px;
}

.lucky-result-wrapper img {
  width: auto;
  height: auto;
}

#lucky-info-wrapper {
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

#lucky-info-title {
  width: 100%;
  height: auto;
  margin-top: 15px;
}

.user-info-avatar-wrapper {
  width: 100%;
  text-align: center;
  margin: 15px 0;
}

.user-info-avatar-inline-wrapper {
  display: inline-block;
  width: auto;
}

.user-info-avatar-inline-wrapper {
}

.user-info-avatar-inline-wrapper img {
  width: auto;
  height: auto;
  display: inline-block;
}

#lucky-info-avatar-icon {
  width: auto;
  height: 110px;
  margin-left: -163px;
}

#lucky-info-avatar {
  margin-left: -31.8px;
  border: 3px solid #d41619;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.lucky-ticket-mouth {
  position: absolute;
  left: 10px;
  top: 0;
}

.lucky-bar-mouth {
  position: absolute;
  top: 20px;
  right: 67px;
  width: 8px;
  height: 50px;
  border-radius: 4px;
  background: #000;
}

.lucky-bar-wrapper {
  position: absolute;
  right: -40px;
  top: -20px;
}

.lucky-bar {
  position: absolute;
  top: -10px;
  right: 0;
}

.lucky-ticket-wrapper {
  position: absolute;
  left: 15px;
  top: 6px;
  right: 45px;
  border-top: 3px solid #000;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}

.user-info-wrapper {
  position: relative;
  margin: 0 30px 0 30px;
  padding: 20px;
}

.user-info-wrapper .left-top {
  position: absolute;
  left: 0;
  top: 0;
  background: url(../img/info-bg.png);
  width: 33px;
  height: 33px;
  background-position: 0 0;
  z-index: 0;
}

.user-info-wrapper .top {
  position: absolute;
  left: 33px;
  top: 0;
  right: 33px;
  height: 11px;
  background: url(../img/info-bg-top.png) repeat-x;
  z-index: 0;
}

.user-info-wrapper .right-top {
  position: absolute;
  top: 0;
  right: 0;
  background: url(../img/info-bg.png);
  width: 33px;
  height: 33px;
  background-position: 100% 0;
  z-index: 0;
}

.user-info-wrapper .right {
  position: absolute;
  top: 33px;
  right: 0;
  bottom: 33px;
  width: 14px;
  background: url(../img/info-bg-right.png) repeat-y;
  z-index: 0;
}

.user-info-wrapper .right-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  background: url(../img/info-bg.png);
  width: 33px;
  height: 33px;
  background-position: 100% 100%;
  z-index: 0;
}

.user-info-wrapper .bottom {
  position: absolute;
  left: 33px;
  bottom: 0;
  right: 33px;
  height: 12px;
  background: url(../img/info-bg-bottom.png) repeat-x;
  z-index: 0;
}

.user-info-wrapper .left-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../img/info-bg.png);
  width: 33px;
  height: 33px;
  background-position: 0 100%;
  z-index: 0;
}

.user-info-wrapper .left {
  position: absolute;
  top: 33px;
  left: 0;
  bottom: 33px;
  width: 11px;
  background: url(../img/info-bg-left.png) repeat-y;
  z-index: 0;
}

.user-info-inner {
  position: relative;
  z-index: 1;
  background: #f6e4cb;
}

.user-name-wrapper {
  font-weight: bold;
  font-size: 24px;
  color: #d41619;
  text-align: left;
  height: 40px;
  line-height: 40px;
  margin-bottom: 5px;
}

.info-tag-wrapper {
  position: relative;
  padding: 20px;
}

.info-tag-wrapper .left-top {
  position: absolute;
  left: 0;
  top: 0;
  background: url(../img/info-tag-bg.png);
  width: 25px;
  height: 25px;
  background-position: 0 0;
  z-index: 0;
}

.info-tag-wrapper .top {
  position: absolute;
  left: 25px;
  top: 0;
  right: 25px;
  background: #d41619 url(../img/info-tag-top.png) repeat-x;
  height: 25px;
  z-index: 0;
}

.info-tag-wrapper .right-top {
  position: absolute;
  right: 0;
  top: 0;
  background: url(../img/info-tag-bg.png);
  width: 25px;
  height: 25px;
  background-position: 100% 0;
  z-index: 0;
}

.info-tag-wrapper .right {
  position: absolute;
  top: 25px;
  right: 0;
  bottom: 25px;
  background: url(../img/info-tag-right.png) repeat-y;
  background-position: right 0;
  width: 25px;
  z-index: 0;
}

.info-tag-wrapper .right-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  background: url(../img/info-tag-bg.png);
  width: 25px;
  height: 25px;
  background-position: 100% 100%;
  z-index: 0;
}

.info-tag-wrapper .bottom {
  position: absolute;
  left: 25px;
  bottom: 0;
  right: 25px;
  background: #d41619 url(../img/info-tag-bottom.png) repeat-x;
  background-position: 0 bottom;
  height: 25px;
  z-index: 0;
}

.info-tag-wrapper .left-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../img/info-tag-bg.png);
  width: 25px;
  height: 25px;
  background-position: 0 100%;
  z-index: 0;
}

.info-tag-wrapper .left {
  position: absolute;
  top: 25px;
  right: left;
  bottom: 25px;
  background: url(../img/info-tag-left.png) repeat-y;
  width: 25px;
  z-index: 0;
}

.info-tag {
  position: relative;
  z-index: 1;
  text-align: left;
  text-indent: 2em;
  color: #f5dcc4;
  background: #d41619;
  line-height: 1.2em;
}

.info-wow-wrapper {
  margin-top: 5px;
}

.info-wow-wrapper img {
  height: auto;
  width: auto;
  max-width: 100%;
}

#info-share-wrapper {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}

#info-share-wrapper #info-share-button {
  position: relative;
  display: inline-block;
  height: 48px;
  line-height: 48px;
  padding-left: 30px;
  padding-right: 30px;
  background: #d41619;
  color: #f6e4cb;
  border-radius: 6px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

#info-share-wrapper #info-share-button:before {
  position: absolute;
  content: '';
  display: block;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  border: 1px dashed #840d19;
  border-radius: 6px;
}

#info-share-wrapper #info-share-button:hover,
#info-share-wrapper #info-share-button:focus,
#info-share-wrapper #info-share-button:active {
  background: #ae1114;
}

#err-toast .weui_toast,
#success-toast .weui_toast {
  width: 9em;
  min-height: 9em;
  margin-left: -4.5em;
}

#err-toast .weui_toast .weui_icon_warn {
}

#err-toast .weui_toast .weui_icon_warn:before {
  margin: 20px 0 4px 0;
  font-size: 52px;
  color: #fff;
}

#err-toast .weui_toast_content,
#success-toast .weui_toast_content {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1.5em;
}

#share-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 999;
  display: none;
}

.share-wrapper-content {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
}

#share-wrapper .lucky-share-icon {
  width: auto;
  height: auto;
}

#share-wrapper .lucky-share-angle {
  width: auto;
  height: auto;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1000;
}

.lucky-share-slogon {
  padding: 20px;
  color: #fff;
}

.lucky-share-slogon span {
  color: yellow;
  font-weight: bold;
  font-size: 200%;
  margin-left: 5px;
  margin-right: 5px;
  display: inline-block;
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
       -o-transform: rotate(10deg);
          transform: rotate(10deg);
}

#register-wrapper .support-wrapper {
  color: #f6e4cb;
  text-align: left;
  position: relative;
  padding-top: 20px;
}

.support-wrapper .support-slogan-wrapper {
  text-align: center;
  margin-bottom: 20px;
}

.support-slogan-wrapper .support-slogan {
  width: 90%;
  max-width: 100%;
  height: auto;
}

.candidate-name-wrapper {
  font-size: 24px;
  font-weight: bold;
}

.support-wrapper span {
  margin-left: 10px;
}

.support-wrapper .candidate-basic-info-wrapper {
  margin-left: 20px;
  margin-bottom: 20px;
}

.support-wrapper .support-hand {
  width: auto;
  height: auto;
  position: absolute;
  right: 10px;
  top: 20px;
}

@-webkit-keyframes anim-support {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  } 50% {
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@-moz-keyframes anim-support {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  } 50% {
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@-ms-keyframes anim-support {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  } 50% {
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@-o-keyframes anim-support {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  } 50% {
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes anim-support {
  0% {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
    50% {
    -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
         -o-transform: scale(1.2);
            transform: scale(1.2);
  }
}

.support-wrapper .support-hand.active {
  -webkit-animation: anim-support 0.5s infinite linear;
     -moz-animation: anim-support 0.5s infinite linear;
      -ms-animation: anim-support 0.5s infinite linear;
       -o-animation: anim-support 0.5s infinite linear;
          animation: anim-support 0.5s infinite linear;
}

.support-buttons-wrapper {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}

.support-buttons-wrapper .btn {
  width: 45%;
  height: 36px;
  line-height: 36px;
  display: inline-block;
  text-align: center;
  position: relative;
  color: #d41619;
  background: #f6e4cb;
  border-radius: 6px;
}

.support-buttons-wrapper .btn:active,
.support-buttons-wrapper .btn:hover,
.support-buttons-wrapper .btn:focus {
  background: #e2ccae;
}

.support-buttons-wrapper .btn:before {
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  border: 1px dashed #d41619;
  border-radius: 6px;
}

#support-button {
  float: left;
}

#sign-up-button {
  float: right;
}

#food-title-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

#rank-top-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#rule-title-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.query-rank-wrapper {
  display: inline-block;
}

#food-title-wrapper img,
#rank-title-wrapper img,
#rule-title-wrapper img {
  height: auto;
  width: 100%;
}

#food-foot-wrapper,
#rank-foot-wrapper,
#rule-foot-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

#food-foot-wrapper img,
#rank-foot-wrapper img,
#rule-foot-wrapper img {
  height: auto;
  width: 100%;
}

#rule-1-wrapper img,
#rule-2-wrapper img,
#rule-3-wrapper img,
#rule-4-wrapper img{
  width:80%;
  height:auto;
  margin-bottom:20px;
}

#cities-wrapper {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 27%;
  bottom: 20%;
  overflow: hidden;
}
#food-order-wrapper {
  position: absolute;
  right: 5%;
  top: 25%;
  bottom: 5%;
  overflow: hidden;
}

#cities-inner {
  float: left;
}

#cities-inner .prompt-area,
#food-order-wrapper .prompt-area{
  font-size: 80%;
  color: #d41619;
  margin-bottom: 10px;
}

#cities-inner .prompt-area span,
#food-order-wrapper .prompt-area span {
  border: 1px solid #d41619;
  border-radius: 4px;
  display: inline-block;
  padding: 3px 10px;
}

#cities-wrapper .btn {
  width: 30%;
  margin-right: 1%;
  margin-left: 1.5%;
  display: inline-block;
  float: left;
  text-align: center;
  background: #d92522;
  margin-bottom: 8px;
  background: #e95640;
  color: #f6e4cb;
  border-radius: 6px;
  position: relative;
  padding-top: 3px;
  padding-bottom: 3px;
}

#cities-wrapper .btn:before {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  border: 1px dashed #7f0f15;
  border-radius: 6px;
}

#food-order-wrapper {  
  background: #f6e4cb;
  z-index: 1000;
  display: none;
}

.food-line {
  text-align: center;
  margin-top: 10px;
}

#food-order-wrapper img {
  width: auto;
  height: auto;
}

#query-rank-input {
  height: 30px;
  width: 270px;
  background: #ffcb9c;
  border: none;
  border-radius: 3px 0 0 3px;
  color: #e40012;
  outline: none;
  padding-left: 5px;
  padding-right: 5px;
  float: left;
  box-sizing: border-box;
}

#query-rank-btn {
  background: #e40012 url(../img/btn-rank-query.png) center center;
  border-radius: 0 3px 3px 0;
  display: inline-block;
  width: 30px;
  height: 30px;
  float: left;
}

#rank-result-wrapper {
  width: 300px;
  display: inline-block;
}

#rank-result-wrapper:after {
  content: '';
  display: block;
  clear: both;
  width: 0;
  height: 0;
}

#rank-result-wrapper img {
  width: auto;
  height: auto;
}

.rank-result-item {
  float: left;
  width: 33%;
  margin-top: 5px;
  position: relative;
  height: 105px;
  overflow: hidden;
}

.rank-result-avatar-wrapper {
  width: 70%;
  margin: auto;
}

#rank-result-wrapper .rank-result-avatar-wrapper .rank-result-avatar {
  width: 70%;
  border: 3px solid #c80012;
  border-radius: 50%;
}

#rank-result-wrapper .rank-result-info-wrapper {
  text-align: left;
  padding: 5px;
  font-size: 12px;
  color: #c80012;
}

.rank-result-info-wrapper div {
  height: 1.1em;
}

.rank-result-item .rank-star-0 {
  position: absolute;
  top: 0;
  left: 5px;
}

#rank-wrapper {
  padding: 10px 0px;
}

#load-rank-wrapper {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.6);
}

#load-rank-wrapper img {
  width: auto;
  height: auto;
}

.load-rank-inner {
  margin-top: 50%;
}

#rank-result-pagination {
  clear: both;
  margin-top:10px;
}

#rank-result-pagination .pagination {
  
}

#rank-result-pagination .pagination li {
  display: inline-block;
  list-style: none;
  background: #f6e4cb;
  border: 1px solid #da2724;
  color: #d41619;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 12px;
  margin: auto 1px;
}

#rank-result-pagination .pagination li.disabled {
  background: #f6e4cb;
  color: #888;
  border-color: #888;
}
#rank-result-pagination .pagination li.active {
  background: #da2724;
  color: #f6e4cb;
}

#rank-result-pagination .pagination li:first-child {
  border-radius: 3px 0 0 3px;
}

#rank-result-pagination .pagination li:last-child {
  border-radius: 0 3px 3px 0;
}

.rank-result-error {
  color: #d41619;
  font-size: 12px;
}

@-webkit-keyframes anim-load-rank {
  0% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  } 100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-moz-keyframes anim-load-rank {
  0% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  } 100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-ms-keyframes anim-load-rank {
  0% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  } 100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-o-keyframes anim-load-rank {
  0% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  } 100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes anim-load-rank {
  0% {
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
            transform: rotate(0deg);
  } 50% {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
  } 100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.load-rank-icon {
  animation: anim-load-rank 1.0s infinite linear;
}

.rank-btns-wrapper {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
}

.rank-btns-wrapper .btn {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  background: #d41619;
  border-radius: 6px;
  position: relative;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
  color: #f6e4cb;
}

.food-line .btn {
  width:100px;
  height: 45px;
  line-height: 40px;
  font-size: 16px;
  background: #d41619;
  border-radius: 6px;
  position: relative;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:10px;
  padding-bottom:10px;
  font-weight: bold;
  color: #f6e4cb;
  margin-left:10px;
  margin-right:10px;
}

.rank-btns-wrapper .btn:before,
.food-line .btn:before {
  content: '';
  position: absolute;
  display: block;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  border: 1px dashed #700707;
  border-radius: 4px;
}

.rank-btns-wrapper .btn.active {
  background: #f6e4cb;
  color: #d41619;
  
}

.rank-btns-wrapper .btn.active:before {
  border-color: #a58368;
}

#index-intro-foot-btn img {
  width:45px;
  height:49px;
}
#index-lucky-intro-angle img{
  width:30px;
  height:30px;
}

.updown {
  animation:ghostUpdown 2s 2s infinite alternate;
  -webkit-animation:ghostUpdown 2s 2s infinite alternate;
}

@keyframes ghostUpdown{
	from{margin-top:100px;}
	to{margin-top:70px;}
}
@-webkit-keyframes ghostUpdown{
	from{margin-top:100px;}
	to{margin-top:70px;}
}

.zoom {
  -webkit-animation: zoom 1.5s linear ;
     -moz-animation: zoom 1.5s linear;
      -ms-animation: zoom 1.5s linear ;
       -o-animation: zoom 1.5s linear;
          animation: zoom 1.5s linear ;
}
@keyframes zoom
{
     0%   {transform:  scale(1);opacity:0;}
    50%   {transform: scale(2);opacity:0.5;}
    100%   {transform: scale(1);opacity:1;}
}

@-moz-keyframes zoom
{
    0%   {transform:  scale(1);opacity:0;}
    50%   {transform: scale(2);opacity:0.5;}
    100%   {transform: scale(1);opacity:1;}
}

@-webkit-keyframes zoom
{
    0%   {transform:  scale(1);opacity:0;}
    50%   {transform: scale(2);opacity:0.5;}
    100%   {transform: scale(1);opacity:1;}
}

@-o-keyframes zoom
{
    0%   {transform:  scale(1);opacity:0;}
    50%   {transform: scale(2);opacity:0.5;}
    100%   {transform: scale(1);opacity:1;}
}

.head-msg-one{
    -webkit-animation: head-msg-one 1.5s linear infinite ;
    -moz-animation: head-msg-one 1.5s linear infinite;
    -ms-animation: head-msg-one 1.5s linear infinite ;
    -o-animation: head-msg-one.5s linear infinite;
    animation: head-msg-one 1.5s linear infinite ;
}

#audio_btn {
  background-image:url(../img/play.png);
  background-size:contain;
  position:absolute;
  right:20px;
  top:20px;
  z-index:200;
  width:30px;
  height:30px;
}

.rotate {
  -webkit-animation: rotating 1.8s infinite linear;
     -moz-animation: rotating 1.8s infinite linear;
      -ms-animation: rotating 1.8s infinite linear;
       -o-animation: rotating 1.8s infinite linear;
          animation: rotating 1.8s infinite linear;
}

@keyframes rotating {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

@-webkit-keyframes rotating {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}

.user-tag-label {
  width:30px;
  overflow: hidden;
  color:#E95741;
  font-size:1.0em;
  font-weight:bold;
  line-height:130%;
}

.user-tag-desc{
  position: absolute;
  width:85%;
  margin-left:-90%;
  overflow:hidden;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  color:#E95741;
  font-size:0.9em;
  font-weight:bold;
  margin-top:5px;
  text-indent:2em;
  padding:5px 5px 5px 5px;
  text-align:left;
  line-height:130%; 
}

.mui-scroll-wrapper {
  position:absolute;
  z-index:2;
  top:130px;
  bottom:0;
  left:0;
  overflow:hidden;
  width:100%; 
  margin-bottom:60px;
}
.mui-scroll {
  position:absolute;
  z-index:1;
  width:100%;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
}
.mui-scrollbar {
  position:absolute;
  z-index:9998;
  overflow:hidden;
  -webkit-transition:500ms;
  transition:500ms;
  transform:translateZ(0px);
  pointer-events:none;opacity:0
}
.mui-scrollbar-vertical {
  top:0;
  right:1px;
  bottom:2px;
  width:4px
}
.mui-scrollbar-vertical .mui-scrollbar-indicator {
  width:100%
}




